<template>
	<view>

		<view class="bg_box">
			<image class="bg01" :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'bg05.png'"
				mode="widthFix">
			</image>
			<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
				<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
				<view class="text">{{pageTitle}}</view>
			</view>
			<view class="bg_content">
				<view class="coupon_box">
					<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/bg11.png" mode="widthFix">
					</image>
					<view class="coupon_content">
						<view class="text_box">
							<view class="title">{{inception.coupon_num}}</view>
							<view class="num">使用跑腿券（张）</view>
						</view>
						<view class="text_box">
							<view class="title">{{inception.coupon_income}}</view>
							<view class="num">当前月份收入（元）</view>
						</view>
					</view>
				</view>


				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="time_box">
						<view class="title">日期选择</view>
						<view class="time">{{date}}</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</picker>
				<block v-for="(item, index) in info" :key="index">
					<view class="other_box">
						<!-- <view class="icon">
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu09.png" mode="widthFix" v-if="item.name == '每日签到'"></image>
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu05.png" mode="widthFix" v-if="item.name == '绑定新用户'"></image>
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu06.png" mode="widthFix" v-if="item.name == '分享微信好友'"></image>
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu07.png" mode="widthFix" v-if="item.name == '观看广告'"></image>
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu08.png" mode="widthFix" v-if="item.name == '海报点击'"></image>
							<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu10.png" mode="widthFix" v-if="item.name == '兑换跑腿券'"></image>
						</view> -->
						<view class="text_box">
							<view class="title">{{item.service_name}}</view>
							<view class="time">{{item.receipt_time}}</view>
						</view>
						<view class="number">
							<view class="num">
								<text>+</text>
								{{item.coupon_num}}
							</view>
							<!-- <view class="num02" v-if="item.service_id == 6">
								<text>-</text>
								{{item.coupon_num}}
							</view> -->
							<view class="b">
								<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/yh01.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</block>

				<view class="clear_box"></view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				scrrol: false,
				page: 1,
				info: [
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu09.png',
					// 	title:'每日签到',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'0',
					// },
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu05.png',
					// 	title:'绑定新用户',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'0',
					// },
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu06.png',
					// 	title:'分享微信好友',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'0',
					// },
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu07.png',
					// 	title:'观看广告',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'0',
					// },
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu08.png',
					// 	title:'海报点击',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'0',
					// },
					// {
					// 	icon:'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/menu10.png',
					// 	title:'兑换跑腿券',
					// 	money:'10',
					// 	time:'2022-12-22 13:32:19',
					// 	type:'1',
					// }
				],
				pageTitle: '',
				type: '',
				date: currentDate,
				inception:'',
			}
		},
		onLoad(e) {
			let that = this;
			that.type = e.type;
			if (that.type == 0) {
				that.pageTitle = '取件劵量明细'
			} else if (that.type == 1) {
				that.pageTitle = '服务劵量明细'
			}else if (that.type == 2) {
				that.pageTitle = '寄件劵量明细'
			}
		},
		onShow() {
			let that = this;
			that.page = 1;
			that.loadData();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				let that = this;
				that.page = 1;
				that.date = e.detail.value;
				that.loadData();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			loadData() {
				let that = this;
				that.Net._get('terminal/order_coupon_info', {
					per_page: '10',
					page: that.page,
					type: that.type,
					date: that.date,
				}, res => {
					if (res.code == 200) {
						// console.log(res.data.data);
						that.info = res.data.data;
						that.inception = res.data;

					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.page = 1;
			that.info = [];
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
		onReachBottom() {
			var that = this;
			that.page++;
			that.Net._get('terminal/order_coupon_info', {
				per_page: '10',
				page: that.page,
				type: that.type,
				date: that.date,
			}, res => {
				if (res.code == 200) {
					//console.log(res)
					if (res.data.data == '') {
						uni.showToast({
							title: '已经是最后一页了',
							duration: 2000,
							icon: 'none'
						});
					} else {
						that.info = that.info.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
	}

	.clear_box07 {
		height: 27vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 999;
	}



	.other_box {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 3vw;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}

	.other_box .icon {
		width: 10vw;
		margin-right: 3vw;
	}

	.other_box .icon image {
		width: 100%;
		display: block;
	}

	.other_box .text_box {
		flex: 1;
	}

	.other_box .text_box .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}

	.other_box .text_box .time {
		font-size: 3vw;
		color: #999;
		margin-top: 1vw;
	}

	.other_box .number {
		flex: 1;
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: flex-end;
	}

	.other_box .number .num {
		font-size: 4.5vw;
		font-weight: bold;
		color: #FF3836;
		margin-right: 2vw;
	}

	.other_box .number .num02 {
		font-size: 4.5vw;
		font-weight: bold;
		color: #333;
		margin-right: 2vw;
	}

	.other_box .number .b {
		width: 6vw;
		margin-top: 1vw;
	}

	.other_box .number .b image {
		width: 100%;
	}

	.scrrolHeader {
		background-color: #fef2e6 !important;
	}

	.coupon_box {
		width: 100%;
		position: relative;
	}

	.coupon_box image {
		width: 100%;
		display: block;
	}

	.coupon_box .coupon_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
	}

	.coupon_box .coupon_content .text_box {
		flex: 1;
	}

	.coupon_box .coupon_content .title {
		font-size: 7vw;
		color: #fff;
		font-weight: bold;
		text-align: center;

	}

	.coupon_box .coupon_content .num {
		font-size: 3.8vw;
		color: #fff;
		text-align: center;
		margin-top: 2vw;
	}

	.time_box {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 3vw;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}

	.time_box .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}

	.time_box .time {
		font-size: 3.5vw;
		color: #666;
	}

	.time_box .arrow {
		font-size: 4vw;
		color: #999;
	}
</style>